<template>
  <PageWrapper class="high-form" title="新增订单" contentBackground contentClass="p-4">
    <a-card title="基础信息" :bordered="false">
      <BasicForm @register="register" />
    </a-card>
    <a-card title="发货信息" :bordered="false">
      <BasicForm @register="registerShipment" />
    </a-card>
    <a-card title="收货信息" :bordered="false">
      <BasicForm @register="registerReceived" />
    </a-card>
    <a-card title="货物信息" :bordered="false">
      <BasicForm @register="registerGoods" />
    </a-card>
    <a-card title="附加信息" :bordered="false">
      <BasicForm @register="registerExtra" />
    </a-card>
    <a-card title="其他信息" :bordered="false">
      <BasicForm @register="registerOther" />
    </a-card>

    <template #rightFooter>
      <a-button class="resButton" type="primary" @click="emptyAll"> 重置 </a-button>
      <a-button type="primary" @click="submitAll"> 保存 </a-button>
    </template>
  </PageWrapper>
</template>
<script lang="ts">
  import { defineComponent, ref, onMounted } from 'vue';
  import { useRouter } from 'vue-router';
  import moment, { Moment } from 'moment';
  import { FormSchema, useForm, BasicForm } from '/@/components/Form/index';
  import { PageWrapper } from '/@/components/Page';

  const provincesOptions = [
    {
      id: 'guangdong',
      label: '广东省',
      value: '1',
      key: '1',
    },
    {
      id: 'jiangsu',
      label: '江苏省',
      value: '2',
      key: '2',
    },
  ];

  const citiesOptionsData = {
    guangdong: [
      {
        label: '珠海市',
        value: '1',
        key: '1',
      },
      {
        label: '深圳市',
        value: '2',
        key: '2',
      },
      {
        label: '广州市',
        value: '3',
        key: '3',
      },
    ],
    jiangsu: [
      {
        label: '南京市',
        value: '1',
        key: '1',
      },
      {
        label: '无锡市',
        value: '2',
        key: '2',
      },
      {
        label: '苏州市',
        value: '3',
        key: '3',
      },
    ],
  };

  // 基础
  let schemasNoe: FormSchema[] = [
    {
      field: 'code',
      component: 'Input',
      label: '订单编号',
      colProps: {
        lg: 6,
        sm: 12,
      },
      componentProps: {
        disabled: true,
        placeholder: '系统自动生成',
      },
    },
    {
      field: 'date',
      component: 'DatePicker',
      label: '订单日期',
      defaultValue: ref<Moment>(moment(new Date())),
      colProps: {
        lg: 6,
        sm: 12,
      },
      required: true,
      componentProps: {
        placeholder: '选择日期',
        onChange: (e: any) => {
          console.log(e);
        },
      },
    },
    {
      field: 'orderType',
      component: 'Select',
      label: '订单类型',
      colProps: {
        lg: 6,
        sm: 12,
      },
      required: true,
      componentProps: {
        options: [
          {
            label: '选项1',
            value: '1',
            key: '1',
          },
          {
            label: '选项2',
            value: '2',
            key: '2',
          },
        ],
        onChange: (e: any) => {
          console.log(e);
        },
      },
    },
    {
      field: 'orderState',
      component: 'Input',
      label: '订单状态',
      colProps: {
        lg: 6,
        sm: 12,
      },
      componentProps: { disabled: true, defaultValue: '待派车' },
    },
  ];
  //发货
  let schemasShipment: FormSchema[] = [
    {
      field: 'startCustomerName',
      component: 'Input',
      label: '发货客户',
      required: true,
      colProps: {
        md: 8,
      },
      componentProps: {},
    },
    {
      field: 'startContacts',
      component: 'Input',
      label: '发货联系人',
      required: true,
      colProps: {
        md: 8,
      },
      componentProps: {},
    },
    {
      field: 'startPhone',
      component: 'Input',
      label: '发货电话',
      required: true,
      colProps: {
        md: 8,
      },
      componentProps: {},
    },
    {
      field: 'startProvince',
      component: 'Select',
      label: '发货省份',
      required: true,
      colProps: {
        md: 8,
      },
      componentProps: {
        options: provincesOptions,
        placeholder: '省份与城市联动',
      },
    },
    {
      field: 'startCity',
      component: 'Select',
      label: '发货城市',
      required: true,
      colProps: {
        md: 8,
      },
      componentProps: {
        options: citiesOptionsData[provincesOptions[0].id], // defalut []
        placeholder: '省份与城市联动',
      },
    },
    {
      field: 'startArea',
      component: 'Input',
      label: '发货县区',
      required: true,
      colProps: {
        md: 8,
      },
    },
    {
      field: 'startAddress',
      component: 'Input',
      label: '发货详细地址',
      required: true,
      colProps: {
        span: 24,
      },
      componentProps: {},
    },
  ];
  //出货
  let schemasReceived: FormSchema[] = [
    {
      field: 'endCustomerName',
      component: 'Input',
      label: '收货客户',
      required: true,
      colProps: {
        md: 8,
      },
      componentProps: {},
    },
    {
      field: 'endContacts',
      component: 'Input',
      label: '收货联系人',
      required: true,
      colProps: {
        md: 8,
      },
      componentProps: {},
    },
    {
      field: 'endPhone',
      component: 'Input',
      label: '收货电话',
      required: true,
      colProps: {
        md: 8,
      },
      componentProps: {},
    },
    {
      field: 'endProvince',
      component: 'Input',
      label: '收货省份',
      required: true,
      colProps: {
        md: 8,
      },
      componentProps: {},
    },
    {
      field: 'endCity',
      component: 'Input',
      label: '收货城市',
      required: true,
      colProps: {
        md: 8,
      },
      componentProps: {},
    },
    {
      field: 'endArea',
      component: 'Input',
      label: '收货县区',
      required: true,
      colProps: {
        md: 8,
      },
      componentProps: {},
    },
    {
      field: 'endAddress',
      component: 'Input',
      label: '收货详细地址',
      required: true,
      colProps: {
        span: 24,
      },
      componentProps: {},
    },
  ];
  // 货物信息
  let schemasGoods: FormSchema[] = [
    {
      field: 'nameGoods',
      component: 'Input',
      label: '货物名称',
      required: true,
      colProps: {
        lg: 6,
        sm: 12,
      },
      componentProps: {},
    },
    {
      field: 'packingMethod',
      component: 'Select',
      label: '包装方式',
      colProps: {
        lg: 6,
        sm: 12,
      },
      componentProps: {
        options: [
          {
            label: '选项1',
            value: '1',
            key: '1',
          },
          {
            label: '选项2',
            value: '2',
            key: '2',
          },
        ],
        onChange: (e: any) => {
          console.log(e);
        },
      },
    },
    {
      field: 'paymentMethod',
      component: 'Select',
      label: '付款方式',
      colProps: {
        lg: 6,
        sm: 12,
      },
      required: true,
      componentProps: {
        options: [
          {
            label: '选项1',
            value: '1',
            key: '1',
          },
          {
            label: '选项2',
            value: '2',
            key: '2',
          },
        ],
        onChange: (e: any) => {
          console.log(e);
        },
      },
    },
    {
      field: 'number',
      component: 'InputNumber',
      label: '件数',
      required: true,
      colProps: {
        lg: 6,
        sm: 12,
      },
      componentProps: {},
    },
    {
      field: 'weight',
      component: 'InputNumber',
      label: '重量',
      required: true,
      colProps: {
        lg: 6,
        sm: 12,
      },
      componentProps: {},
    },
    {
      field: 'volume',
      component: 'InputNumber',
      label: '体积',
      required: true,
      colProps: {
        lg: 6,
        sm: 12,
      },
      componentProps: {},
    },
    {
      field: 'freight',
      component: 'InputNumber',
      label: '运费',
      colProps: {
        lg: 6,
        sm: 12,
      },
      componentProps: {},
    },
    {
      field: 'paymentGoods',
      component: 'InputNumber',
      label: '代收货款',
      colProps: {
        lg: 6,
        sm: 12,
      },
      componentProps: {},
    },
    {
      field: 'valueGoods',
      component: 'InputNumber',
      label: '货物价值',
      colProps: {
        lg: 6,
        sm: 12,
      },
      componentProps: {},
    },
    {
      field: 'insuredValue',
      component: 'InputNumber',
      label: '保价金额',
      colProps: {
        lg: 6,
        sm: 12,
      },
      componentProps: {},
    },
  ];
  //附加信息
  let schemasExtra: FormSchema[] = [
    {
      field: 'deliveryService',
      component: 'CheckboxGroup',
      label: '送货服务',
      colProps: {
        md: 6,
        sm: 8,
        xs: 12,
      },
      componentProps: {
        options: [
          {
            label: '',
            value: '1',
          },
        ],
      },
    },
    {
      field: 'handlingServices',
      component: 'CheckboxGroup',
      label: '装卸服务',
      colProps: {
        md: 6,
        sm: 8,
        xs: 12,
      },
      componentProps: {
        options: [
          {
            label: '',
            value: '1',
          },
        ],
      },
    },
    {
      field: 'receiptService',
      component: 'CheckboxGroup',
      label: '回单服务',
      colProps: {
        md: 6,
        sm: 8,
        xs: 12,
      },
      componentProps: {
        options: [
          {
            label: '',
            value: '1',
          },
        ],
      },
    },
    {
      field: 'insuranceServices',
      component: 'CheckboxGroup',
      label: '保险服务',
      colProps: {
        md: 6,
        sm: 8,
        xs: 12,
      },
      componentProps: {
        options: [
          {
            label: '',
            value: '1',
          },
        ],
      },
    },
    {
      field: 'smsServices',
      component: 'CheckboxGroup',
      label: '短信服务',
      colProps: {
        md: 6,
        sm: 8,
        xs: 12,
      },
      componentProps: {
        options: [
          {
            label: '',
            value: '1',
          },
        ],
      },
    },
    {
      field: 'warehousingServices',
      component: 'CheckboxGroup',
      label: '仓储服务',
      colProps: {
        md: 6,
        sm: 8,
        xs: 12,
      },
      componentProps: {
        options: [
          {
            label: '',
            value: '1',
          },
        ],
      },
    },
    {
      field: 'upstairsService',
      component: 'CheckboxGroup',
      label: '上楼服务',
      colProps: {
        md: 6,
        sm: 8,
        xs: 12,
      },
      componentProps: ({ formModel }) => {
        return {
          options: [
            {
              label: '',
              value: '1',
            },
          ],
          onChange: () => {
            formModel.floorNumber = '';
          },
        };
      },
    },
    {
      field: 'floorNumber',
      component: 'InputNumber',
      label: '楼层',
      colProps: {
        md: 6,
        sm: 8,
        xs: 12,
      },
      dynamicDisabled: ({ values }) => {
        let flag = true;
        for (const key in values) {
          if (key === 'upstairsService') {
            if (Object.keys(values[key]).length > 0) {
              flag = false;
            }
          }
        }
        return flag;
      },
    },
    {
      field: 'dispatchCar',
      component: 'CheckboxGroup',
      label: '派车提货',
      colProps: {
        md: 6,
        sm: 8,
        xs: 12,
      },
      componentProps: {
        options: [
          {
            label: '',
            value: '1',
          },
        ],
      },
    },
    {
      field: 'requirement',
      component: 'Input',
      label: '提货要求',
      colProps: {
        md: 18,
        sm: 24,
      },
    },
  ];
  //其他
  let schemasOther: FormSchema[] = [
    {
      field: 'customerCode',
      component: 'Input',
      label: '客户单号',
      colProps: {
        lg: 6,
        sm: 12,
      },
    },
    {
      field: 'productType',
      component: 'Select',
      label: '产品类型',
      colProps: {
        lg: 6,
        sm: 12,
      },
      required: true,
      componentProps: {
        options: [
          {
            label: '定日达',
            value: '1',
          },
          {
            label: '定时达',
            value: '1',
          },
        ],
      },
    },
    {
      field: 'prescription',
      component: 'Select',
      label: '时效',
      colProps: {
        lg: 6,
        sm: 12,
      },
      required: true,
      componentProps: {
        options: [
          {
            label: '定日达',
            value: '1',
          },
          {
            label: '定时达',
            value: '1',
          },
        ],
      },
    },
    {
      field: 'salesman',
      component: 'Input',
      label: '业务员',
      colProps: {
        lg: 6,
        sm: 12,
      },
    },
    {
      field: 'remarks',
      component: 'Input',
      label: '备注',
      colProps: {
        span: 24,
      },
    },
  ];

  export default defineComponent({
    components: { PageWrapper, BasicForm },

    setup() {
      const router = useRouter();

      const [register, { validate, resetFields, setFieldsValue }] = useForm({
        labelWidth: 110,
        schemas: schemasNoe,
        actionColOptions: {
          span: 24,
        },
        showActionButtonGroup: false,
      });

      const [
        registerShipment,
        {
          validate: validateShipment,
          resetFields: resetFieldsShipment,
          setFieldsValue: setFieldsValueShipment,
        },
      ] = useForm({
        labelWidth: 110,
        schemas: schemasShipment,
        actionColOptions: {
          span: 24,
        },
        showActionButtonGroup: false,
      });

      const [registerReceived, { validate: validateReceived, resetFields: resetFieldsReceived }] =
        useForm({
          labelWidth: 110,
          schemas: schemasReceived,
          actionColOptions: {
            span: 24,
          },
          showActionButtonGroup: false,
        });

      const [registerGoods, { validate: validateGoods, resetFields: resetFieldsGoods }] = useForm({
        labelWidth: 110,
        schemas: schemasGoods,
        actionColOptions: {
          span: 24,
        },
        showActionButtonGroup: false,
      });

      const [registerExtra, { validate: validateExtra, resetFields: resetFieldsExtra }] = useForm({
        labelWidth: 110,
        schemas: schemasExtra,
        actionColOptions: {
          span: 24,
        },
        showActionButtonGroup: false,
      });

      const [registerOther, { validate: validateOther, resetFields: resetFieldsOther }] = useForm({
        labelWidth: 110,
        schemas: schemasOther,
        actionColOptions: {
          span: 24,
        },
        showActionButtonGroup: false,
      });

      // 提交
      async function submitAll() {
        try {
          const [values, shipment, received, goods, extra, other] = await Promise.all([
            validate(),
            validateShipment(),
            validateReceived(),
            validateGoods(),
            validateExtra(),
            validateOther(),
          ]);
          console.log(values, shipment, received, goods, extra, other);
        } catch (error) {}
      }

      // 重置
      async function emptyAll() {
        resetFields();
        resetFieldsShipment();
        resetFieldsReceived();
        resetFieldsGoods();
        resetFieldsExtra();
        resetFieldsOther();
      }

      onMounted(() => {
        const isAdd = router.currentRoute.value.query.isAdd;

        if (isAdd === 'false') {
          setFieldsValue({
            code: 'DD2103250001',
            date: '2021-03-25',
            orderType: '接口订单',
          });
          setFieldsValueShipment({
            startCustomerName: 'C001523',
            startContacts: '老黄',
            startPhone: '13249788868',
            startProvince: '北京',
            startCity: '北京',
            startArea: '东城',
            startAddress: '123',
          });
        }
      });

      return {
        register,
        registerShipment,
        schemasNoe,
        registerReceived,
        registerGoods,
        registerExtra,
        registerOther,
        moment,
        submitAll,
        validateExtra,
        emptyAll,
        resetFields, //以下重置
        resetFieldsShipment,
        resetFieldsReceived,
        resetFieldsGoods,
        resetFieldsExtra,
        resetFieldsOther,
        setFieldsValue, //以下设置值
        setFieldsValueShipment,
        router, //路由
      };
    },
  });
</script>
<style lang="less" scoped>
  .bgColor {
    background-color: #fff;
  }

  /deep/#date {
    width: 100%;
  }

  /deep/.ant-input-number {
    width: 100%;
  }

  .resButton {
    margin-right: 15px;
  }
</style>
